<template>
  <div class="form-container">
    <div class="form-breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/userPointList' }">积分列表</el-breadcrumb-item>
        <el-breadcrumb-item>编辑积分</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="form-content">

      <el-form ref="form" :model="form" :rules="rules" label-width="180px">

        <el-form-item label="名称" prop="name">
          <el-col :span="9">
            <el-input v-model="form.name" placeholder="请输入积分名称"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="每次获得经验值" prop="exp">
          <el-col :span="9">
            <el-input v-model="form.exp" placeholder="请输入每次获得经验值"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="每日最多获得经验值次数" prop="exp_max">
          <el-col :span="9">
            <el-input v-model="form.exp_max" placeholder="请输入等级所需经验上限"></el-input>
          </el-col>
          <el-col :span="3">（-1为不限）</el-col>
        </el-form-item>
        <el-form-item label="最多获得经验值次数" prop="exp_total">
          <el-col :span="9">
            <el-input v-model="form.exp_total" placeholder="请输入最多获得经验值次数"></el-input>
          </el-col>
          <el-col :span="3">（-1为不限）</el-col>
        </el-form-item>
        <el-form-item label="每次获得积分" prop="points">
          <el-col :span="9">
            <el-input v-model="form.points" placeholder="请输入每次获得积分"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="最多获得经验值次数" prop="points_max">
          <el-col :span="9">
            <el-input v-model="form.points_max" placeholder="每日最多获得积分次数"></el-input>
          </el-col>
          <el-col :span="3">（-1为不限）</el-col>
        </el-form-item>
        <el-form-item label="总最多获得积分次数" prop="points_total">
          <el-col :span="9">
            <el-input v-model="form.points_total" placeholder="总最多获得积分次数"></el-input>
          </el-col>
          <el-col :span="3">（-1为不限）</el-col>
        </el-form-item>
        <el-form-item>
          <el-row>

            <el-button type="danger" @click="confirmAdd('form')">立即保存</el-button>
            <el-button type="default" @click="cancel()">返回</el-button>
          </el-row>
        </el-form-item>

      </el-form>
    </div>
  </div>

</template>

<script>

  export default {
    data() {
      return {
        validate: false,
        form: {
          name:'',
          exp:'',
          exp_max:'-1',
          exp_total:'-1',
          points:'',
          points_max:'-1',
          points_total:'-1',
        },
        rules: {
          name: [
            {required: true, message: '请输入名称', trigger: 'blur'},
          ],
          exp: [
            {required: true, message: '请输入每次获得的经验值', trigger: 'blur'},
          ],
          exp_max: [
            {required: true, message: '请输入用户等级所需经验上限', trigger: 'blur'},
          ],
          exp_total: [
            {required: true, message: '最多获得经验值次数', trigger: 'blur'},
          ],
          points: [
            {required: true, message: '每次获得积分', trigger: 'blur'},
          ],
          points_max: [
            {required: true, message: '最多获得经验值次数', trigger: 'blur'},
          ],
          points_total: [
            {required: true, message: '总最多获得积分次数', trigger: 'blur'},
          ],
        },
        filter_keyword: '',

      }
    },
    mounted() {
      this._initData()
    },
    methods: {

      _initData(){
        const id = this.$route.query.id;
        this.$http.get('/api/root/UserPoints/pointsInfo', {id: id})
          .then(rest => {
            this.form = {
              ...rest.data
            };
          })
      },

      confirmAdd(form) {
        this.validateFormData(form);
        if (this.validate) {
          const _ths = this;

          this.$http.post('/api/root/UserPoints/pointsEdit', {...this.form})
            .then(rest => {
              if (rest.msg == 'ok') {
                this.$message.success('新增成功');
                setTimeout(function () {
                  _ths.$router.push({name: 'userPointList'})
                }, 800)
              } else {
                this.form = {
                  ...this.form,
                };
                this.$message.error(rest.msg);
              }
            })
        }
      },
      cancel() {
        this.$router.push({name: 'userPointList'})
      },

      /**
       * 验证表单数据
       * @param form
       */
      validateFormData(form) {
        this.$refs[form].validate((valid) => {
          if (!valid) {
            this.$message({
              message: '表单数据未填写完整,操作失败！',
              type: 'warning'
            });
            return false;
          }
          this.validate = true;
          return true;
        })
      },
    }
  }
</script>
<style lang="less" scoped>
  @import "index.less";
</style>